<template>
  <div class="list-container" ref="listRef">
      <div class="tabs">
        <button>所有(5)</button>
        <button>已完成(2)</button>
        <button>未完成(3)</button>
      </div>

      <div class="list" v-if="list.length">
        <todoListItem v-for="todo in list" :key="todo.id" :item="todo"/>
      </div>
      <div class="empty" v-else>
        当前待办事项列表为空，请添加新待办事项
      </div>
    </div>
</template>
<script>
import todoListItem from './todoListItem.vue'
    export default {
        name: "todoList",
        components:{
            todoListItem,


        },
        props: ['list'], // 声明可接收属性
   

    };
</script>
<style scoped>
.list-container {
  padding: 20px;
}

.tabs {
  display: flex;
}

.tabs button {
  flex: 1;
  line-height: 2;
}

.tabs .active {
  background: #2c2c2c;
  color: #fafafa;
}


</style>